<template>
  <div>
    <h3>表单</h3>
    <div>
      账号：
      <input type="text" v-model="userForm.name" />
    </div>
    <div>
      年龄：
      <input type="number" v-model.number="userForm.age" />
    </div>
    <div>
      <template v-if="userForm.id">
        <button @click="updateUser">保存用户</button>
      </template>
      <template v-else>
        <button @click="saveUser">添加用户</button>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userForm: {
        name: '',
        age: ''
      }
    }
  },
  methods: {
    // 设置修改的方法
    setUserForm(data) {
      this.userForm = data
    },
    saveUser() {
      this.$emit('addUser', { id: Date.now(), ...this.userForm })
      // 重置表单
      this.resetFields()
    },
    resetFields() {
      this.userForm = {
        name: '',
        age: ''
      }
    },
    // 修改
    updateUser() {
      this.$emit('updateUser', this.userForm)
      // 重置表单
      this.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped></style>
